<template>
  <div class="container">
    <!-- :name="today.name" :allIndex="todayData.all" -->
    <cons-card :name="todayData.name" :allIndex="todayData.all"></cons-card>
    <num-list :data="todayData"></num-list>
    <cons-list :data="todayData"></cons-list>
  </div>
</template>

<script>
import { onMounted, computed, ref, onActivated } from "vue";
import { useStore } from "vuex";
import getData from "../services/index";

import NumList from "../components/NumList/index.vue";
import ConsList from "../components/List/TodayList.vue";

export default {
  name: "TodayPage",
  components: {
    NumList,
    ConsList,
  },
  setup() {
    const store = useStore(),
      state = store.state,
      status = ref("");

    //生命周期：mounted
    //执行传入回调函数
    onMounted(() => {
      //传入store请求后端数据
      getData(store);
      // console.log(state);
      /**
       * Proxy {
       *   consName: "白羊座",
       *   errorCode: 0,
       *   field: "today",
       *   month: {},
       *   today: {date: 20211202, name: '白羊座', QFriend: '双鱼座', color: '玫瑰花色', datetime: '2021年12月02日', …},
       *   tomorrow: {},
       *   week: {},
       *   year: {}
       * }
       */

      //定义的响应式状态属性在挂载组件时保存了consName数据(金牛座)
      status.value = state.consName;
    });

    //激活函数
    onActivated(() => {
      //如果他俩不同，说明上面挂载组件的阶段还没有进行过
      //此操作可以解决组件不同步的问题
      if (status.value !== state.consName) {
        getData(store);
        status.value = state.consName;
      }
    });

    return {
      todayData: computed(() => state.today),
    };
  },
};
</script>

<style lang="scss" scoped>
</style>